<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>碉堡音游 - 关于我们</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #FFFFFF; 
            background-image: url('background.jpg'); 
            background-size: cover; 
            background-position: center; 
            background-repeat: no-repeat; 
            background-attachment: fixed;
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
            position: relative; /* 让占位元素相对于容器定位 */
        }

        header {
            position: fixed;
            left: 0;
            top: 0;
            background: #72b5e8;
            color: white;
            padding: 20px;
            text-align: left;
            transition: font-size 0.5s, padding 0.5s;
            border: none; /* 去掉边框 */
            width: 100%; /* 让 header 占满屏幕宽度 */
            z-index: 1000; /* 确保 header 在最顶层 */
        }

        header.small {
            font-size: 20px; /* 滚动后字体变小 */
            padding: 10px; /* 滚动后压缩到左上角 */
        }

        h1 {
            margin: 0;
            font-size: 36px; /* 大字 */
            transition: font-size 0.1s;
        }

        .section {
            padding: 20px;
            margin-top: 20px;
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
        }

        .team-member {
            margin-bottom: 20px;
        }

        .contact-info {
            background: rgba(231, 231, 231, 0.7);
            padding: 10px;
            text-align: center;
            backdrop-filter: blur(10px);
        }

        /* 占位元素样式 */
        .placeholder {
            height: 60px; /* 与 header 相同高度 */
            width: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <header id="myHeader">
            <h1 class="title">碉堡音游 - 音乐与游戏的结合将带给您全新体验</h1>
        </header>        
        <div class="placeholder"></div> 
        <section class="section">
            <h2>关于碉堡音游</h2>
            <p>碉堡音游是一款结合了创新玩法和动听音乐的游戏。我们致力于为用户提供沉浸式的游戏体验，让玩家在享受音乐的同时，也能体验到游戏的乐趣.....</p>
        </section>
        <section class="section">
            <h2>团队成员</h2>
            <div class="team-member">
                <h3>徐良坤（组长）</h3>
                <p>负责：数据库和登录注册的实现</p>
            </div>
            <div class="team-member">
                <h3>詹子杰</h3>
                <p>负责：登录、注册页面的编写和美化</p>
            </div>
            <div class="team-member">
                <h3>尹涵</h3>
                <p>负责：音游的编写</p>
            </div>
            <div class="team-member">
                <h3>李冠仪</h3>
                <p>负责：开始页面、主界面的编写与美化</p>
            </div>
            <div class="team-member">
                <h3>鲍世轩</h3>
                <p>负责：关于我们页面、音游页面的美化</p>
            </div>
            <div class="team-member">
                <h3>张俊琪</h3>
                <p>负责：关于我们界面的编写</p>
            </div>
        </section>
        <section class="section contact-info">
            <h2>联系我们</h2>
            <p>如果您有任何问题或建议，请通过以下方式联系我们：</p>
            <ul>
                <li>邮箱：2457087744@qq.com</li>
                <li>电话：13587565975</li>
                <li>地址：上海市奉贤区海思路999号</li>
            </ul>
        </section>
    </div>

    <script>
        window.onscroll = function() {scrollFunction()};

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("myHeader").classList.add("small");
            } else {
                document.getElementById("myHeader").classList.remove("small");
            }
        }
    </script>
</body>
</html>
